{extend name="login:layout" /}

{block name="title"}登录 - {$__site_name__}{/block}
{block name="body"}

<div class="layui-card">
    <div class="layui-card-header">欢迎登陆 - {$__site_name__}</div>
    <div class="layui-card-body">


        <form class="layui-form">

            <label class="form-item">
                <i class="layui-icon layui-icon-username"></i>
                <input type="text" name="username" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </label>

            <label class="form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </label>

            <label class="form-item form-item-verify">
                <i class="layui-icon layui-icon-auz"></i>
                <input type="text" name="code" placeholder="验证码" autocomplete="off" class="layui-input">
                <img class="verify" src="{:url('verify')}" alt="captcha"/>
            </label>


            <div class="btn-box">
                <div>
                    <button lay-submit lay-filter="login" class="layui-btn layui-btn-normal">登陆</button>
                    {if $is_register}
                    没有账号?<a href="{:url('register')}">立即注册</a>
                    {/if}
                </div>
                {if $is_find_pwd}
                <a href="{:url('find_pwd')}">忘记密码?</a>
                {/if}
            </div>

        </form>


    </div>
</div>

{/block}

{block name="body_script"}
<script>
    layui.use(['jquery', 'form', 'layer'], function () {
        let form = layui.form, $ = layui.jquery, layer = layui.layer;

        // 表单提交
        form.on('submit(login)', function (data) {
            if (!data.field.username) {
                layer.msg('请输入账号', {icon: 2});
                $('input[name=username]').focus();
                return false;
            }

            if (!data.field.password) {
                layer.msg('请输入密码', {icon: 2});
                $('input[name=password]').focus();
                return false;
            }

            if (!data.field.code) {
                layer.msg('请输入验证码', {icon: 2});
                $('input[name=code]').focus();
                return false;
            }

            $.post("{:url('login')}", data.field, res => {
                if (res.code) {
                    window.location.href = res.data.url;
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
{/block}
